<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.3.0/dist/zrender.js"></script> -->
    <script src="./js/zrender.js"></script>

    <title>showing of expression</title>
</head>

<body>
    <div id="container" style="height: 600px; width: 1000px;"></div>
    <script>
        var zr = zrender.init(document.getElementById("container"));

        var w = zr.getWidth() / 2 /2;
        var h = zr.getHeight() / 2 /2;

        var felitHeart = new zrender.Heart({
            shape: {
                cx: w + 130,
                cy: h - 115,
                width: 80,
                height: 100,
            },

            style: {
                fill: "rgb(14,13,13)",
                stroke: '#0e0d0d',
            },
            rotation: 49.8,
            origin: [w + 20, h - 100],
            z: 0,
        })
        var rightHeart = new zrender.Heart({
            shape: {
                cx: w + 240,
                cy: h - 140,
                width: 80,
                height: 100,
            },


            style: {
                fill: "rgb(14,13,13)",
                stroke: '#0e0d0d',
            },
            rotation: 50.6,
            origin: [w + 330, h - 215],
            z: 0,
        })

        var eyeHeart = new zrender.Heart({
            shape: {
                cx: w + 210,
                cy: h - 40,
                width: 18,
                height: 24,
            },
            style: {
                fill: "rgb(14,13,13)",
                stroke: '#0e0d0d',
            },
            rotation: 50.6,
            origin: [w + 330, h - 215],
            z: 2,
        })
        var eyeCircle = new zrender.Circle({
            shape: {
                cx: w + 180,
                cy: h + 10 ,
                r: 10,
            },
            style: {

                lineWidth: 1,
            },

            z: 10
        })
        var rect = new zrender.Rect({
            shape: {
                r: [150, 170, 150, 170],
                x: w,
                y: h,
                width: 320,
                height: 280,
            },
            style: {
                fill: "rgba(245,245,245,1)",
                stroke: '#0e0d0d',
                lineWidth: 10,
            },
            rotation: -50,

            z: 1,
        })
        var rect1 = new zrender.Rect({
            shape: {
                r: [70, 80, 70, 60],
                x: w+180,
                y: h+23,
                width: 120,
                height: 70,
            },
            style: {
                fill: "rgba(245,245,245,1)",
                stroke: '#0e0d0d',
                lineWidth: 10,
            },
           
            z:1,
        })

        var rect2 = new zrender.Rect({
            shape: {
                r: [140, 140, 140, 140],
                x: w,
                y: h+40,
                width: 460,
                height: 400,
            },
            style: {
                fill: "black",
                lineWidth: 10,
            },
            z:0,
        })
        var rect3 = new zrender.Rect({
            shape: {
                x: w+20,
                y: h-150,
                width: 420,
                height: 320,
            },
            style: {
                fill: "white",
                lineWidth: 10,
            },
            z:0,
        })
        rect2.setClipPath(rect3);

        var rect4 = new zrender.Rect({
            shape: {
                x: w+170,
                y: h+60,
                width: 140,
                height: 60,
            },
            style: {
                fill: 'transparent',
                lineWidth: 10,
            },
            z:1,
        })
        rect1.setClipPath(rect4);
        
        zr.add(eyeCircle);
        zr.add(eyeHeart);
        zr.add(rect);
        zr.add(rect1);
        zr.add(rect2);
        zr.add(rect4);
        zr.add(rect3);
        zr.add(felitHeart);
        zr.add(rightHeart);

    </script>
</body>

</html>